<link href="{{basePath}}/css/plugins/dropzone/basic.css" rel="stylesheet">
<link href="{{basePath}}/css/plugins/dropzone/dropzone.css" rel="stylesheet">
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div id="my-awesome-dropzone" class="dropzone">
                    <div class="dz-message">拖入文件或者点击</div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="{{basePath}}/plugins/jquery.min.js"></script>
<script src="{{basePath}}/plugins/dropzone/dropzone.js"></script>
<script src="{{basePath}}/plugins/common.js"></script>
<script src="{{basePath}}/plugins/layer/layer.js"></script>
<script type="text/javascript">
'use strict';
Dropzone.autoDiscover=false;
var myDropzone;
/**
 * 初始化上传控件
 * @param {Object} options 上传选项
 * @param {String} options.url 上传url
 * @param {String} [options.paramName=file] 上传文件的param名
 * @param {Number} [options.maxFiles=100] 最大文件数 
 * @param {Number} [options.maxFileSize=10] 单文件最大容量
 * @param {String} [options.type=image]
 * @param {Object} [options.fileFolder] 前端文件路径
 * @param {Function} [options.success=undefined] 文件上传后的回调函数
*/
function initDropZone(options){
    var acceptedFiles="",//不要使用*，控件不认识
    invalidFileTypeMsg="您上传的文件类型不支持。";
    if(options.type==="image"){
        acceptedFiles=".jpg,.jpeg,.png,.bmp,.gif";
        invalidFileTypeMsg="您上传的文件类型不支持。图片只支持jpg/png/bmp/gif。"
    }else if (options.type==="audio"){
        acceptedFiles=".mp3";
        invalidFileTypeMsg="您上传的文件类型不支持。图片只支持jpg/png/bmp/gif。"
    }
    var maxFiles=options.maxFiles || 100;
    var maxFilesize=options.maxFileSize || 10;
    var maxFilesExceededMsg="您上传的文件已超过上限。文件数限制："+maxFiles;
    myDropzone =new Dropzone("#my-awesome-dropzone",{
        url: options.url,
        parallelUploads: 100,
        filesizeBase:1024,
        paramName:options.paramName || "file",
        maxFilesize: maxFilesize,
        maxFiles:maxFiles,
        autoProcessQueue: false,
        uploadMultiple: false,
        acceptedFiles:acceptedFiles,
        dictFallbackMessage: "您的浏览器支持拖入文件上传，请点击或者使用更新的浏览器。",
        dictFileTooBig: "文件过大，最大文件大小："+maxFilesize+"M。",
        dictInvalidFileType: invalidFileTypeMsg,
        // dictResponseError: "服务器返回错误，Code：{{statusCode}}。",
        // dictCancelUpload: "取消上传",
        // dictCancelUploadConfirmation: "是否确定取消档次上传？",
        // dictRemoveFile: "",
        // dictRemoveFileConfirmation: null,
        dictMaxFilesExceeded: maxFilesExceededMsg,
        init: function() {
            myDropzone = this;
            this.on("sending",function(file,xhr,formData){
                if (options.url.indexOf("uploadFileSave.do")>-1){
                    formData.append("houseCode",options.fileFolder);
                }else{
                    formData.append("token",JSON.parse(localStorage[common.agentSysCacheWord]).token);
                    formData.append("folder",options.fileFolder.folder);
                    formData.append("id",options.fileFolder.id);
                    formData.append("fileName",options.fileFolder.fileName?options.fileFolder.fileName:"sys_house_"+new Date().getTime());
                }
            });
            this.on("success",function(file,data,progress){
                var code=-100;//特殊码，当前端无法处理后端返回时，如没有返回值数据，或者返回为错误的JSON string时使用
                if(!!data===false){
                    //后端无返回值时，处理错误为未知原因
                    processError(code,data,file.name);
                    console.error("data is empty",data);
                    return;
                }
                if(typeof data==="string"){
                    //在java环境中，返回的data可能是json string而不是对象，需要手动parse
                    try{
                        data=JSON.parse(data);
                    }catch(err){
                        processError(code,data,file.name);
                        console.error("JSON parse error:",data,err);
                        return;
                    }
                }
                code=parseInt(data.code);
                var isSuccessful=code===0;
                if(isSuccessful){
                    var success=options.success;
                    if(success){
                        success(file,data,progress);
                    }
                }else{
                    processError(code,data,file.name);
                }
            });
        }
    });
}

function processError(code,data,filename){
    //人为将成功改为失败，因为dropzone在获取success status后自动认为是成功，而我们不是通过http status code来确定成功与否的
    var $previewDiv=$("div.dz-filename:contains("+filename+")").parents(".dz-preview");
    $previewDiv.removeClass("dz-success").addClass("dz-error");

    var message;
    if(code===-100){
        message="上传组件发生未知错误，若上传失败";
    }else if(code===-1){
        message=data.errorMsg;
    }else{
        if(data.res && data.res.msg && code!==108 && code!==115){
            message=data.res.msg;
        }else{
            message="上传发生错误";
        }
    }
    //在图片上方显示错误信息
    $previewDiv.find(".dz-error-message>span").text(message+"<br/>请重试").parent().css({opacity:1});
}

function dropzoneUpload() {
    myDropzone.processQueue();
}
</script>